<template>
  <div>
    <!-- 详情  -->
    <Edialog
      width="60%"
      title="详情"
      :outershow="detailShow"
      @close="detailClose"
      :internal="internalDialog"
    >
      <div class="addAedit" style="padding: 0 20px 0 0px">
        <el-row :gutter="20" class="zdyRow">
          <el-col span="24">
            <div class="da" style="margin-bottom: 10px">
              <div class="line"></div>
              <div style="font-weight: 700">基本信息</div>
            </div>
          </el-col>
          <el-col :xl="12" :xs="12" :sm="12">
            <div style="display: flex; height: 30px; line-height: 30px">
              <div class="leftText">对接系统名称</div>
              <div>
                {{ baseInfoData.systemName }}
              </div>
            </div>
          </el-col>
          <el-col :xl="12" :xs="12" :sm="12">
            <div class="da" style="height: 30px; line-height: 30px">
              <div class="leftText">启用状态</div>
              <el-tag
                size="small"
                type="success"
                v-if="baseInfoData.isEnable == 1"
                >启用</el-tag
              >
              <el-tag size="small" type="danger" v-else>停用</el-tag>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="zdyRow">
          <el-col span="24">
            <div class="da" style="margin-bottom: 10px">
              <div class="line"></div>
              <div style="font-weight: 700">客户端</div>
            </div>
          </el-col>
          <el-col :xl="24" :xs="24" :sm="24">
            <div class="da" style="height: 30px; line-height: 30px">
              <div class="leftText">客户端</div>
              <el-tag
                size="small"
                type="success"
                v-if="baseInfoData.isClient == 1"
                >启用</el-tag
              >
              <el-tag size="small" type="danger" v-else>停用</el-tag>
            </div>
          </el-col>
          <el-col :xl="12" :xs="12" :sm="12">
            <div style="display: flex; height: 30px; line-height: 30px">
              <div class="leftText">客户端应用ID(我方)</div>
              <div>
                {{ baseInfoData.clientAppId }}
              </div>
            </div>
          </el-col>
          <el-col :xl="12" :xs="12" :sm="12">
            <div style="display: flex; height: 30px; line-height: 30px">
              <div class="leftText">客户端签名密钥</div>
              <div>{{ baseInfoData.clientSignSecret }}</div>
            </div>
          </el-col>
          <el-col :xl="12" :xs="12" :sm="12">
            <div style="display: flex; height: 30px; line-height: 30px">
              <div class="leftText">客户端加密密钥</div>
              <div>{{ baseInfoData.clientSecretKey }}</div>
            </div>
          </el-col>
          <el-col :xl="12" :xs="12" :sm="12">
            <div style="display: flex; height: 30px; line-height: 30px">
              <div class="leftText">客户端加密初始化向量</div>
              <div>{{ baseInfoData.clientSecretLv }}</div>
            </div>
          </el-col>
          <el-col :xl="12" :xs="12" :sm="12">
            <div style="display: flex; height: 30px; line-height: 30px">
              <div class="leftText">客户端接口地址</div>
              <div>{{ baseInfoData.clientInterfaceUrl }}</div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col span="24">
            <div class="da" style="margin-bottom: 10px">
              <div class="line"></div>
              <div style="font-weight: 700">服务端</div>
            </div>
          </el-col>
          <el-col :xl="24" :xs="24" :sm="24">
            <div class="da" style="height: 30px; line-height: 30px">
              <div class="leftText">服务端</div>
              <el-tag
                size="small"
                type="success"
                v-if="baseInfoData.isServer == 1"
                >启用</el-tag
              >
              <el-tag size="small" type="danger" v-else>停用</el-tag>
            </div>
          </el-col>
          <el-col :xl="12" :xs="12" :sm="12">
            <div style="display: flex; height: 30px; line-height: 30px">
              <div class="leftText">服务端应用ID(对方)</div>
              <div>
                {{ baseInfoData.serverAppId ? baseInfoData.serverAppId : "--" }}
              </div>
            </div>
          </el-col>
          <el-col :xl="12" :xs="12" :sm="12">
            <div style="display: flex; height: 30px; line-height: 30px">
              <div class="leftText">服务端签名密钥</div>
              <div>
                {{
                  baseInfoData.serverSignSecret
                    ? baseInfoData.serverSignSecret
                    : "--"
                }}
              </div>
            </div>
          </el-col>
          <el-col :xl="12" :xs="12" :sm="12">
            <div style="display: flex; height: 30px; line-height: 30px">
              <div class="leftText">服务端加密密钥</div>
              <div>
                {{
                  baseInfoData.serverSecretKey
                    ? baseInfoData.serverSecretKey
                    : "--"
                }}
              </div>
            </div>
          </el-col>
          <el-col :xl="12" :xs="12" :sm="12">
            <div style="display: flex; height: 30px; line-height: 30px">
              <div class="leftText">服务端加密初始化向量</div>
              <div>
                {{
                  baseInfoData.serverSecretLv
                    ? baseInfoData.serverSecretLv
                    : "--"
                }}
              </div>
            </div>
          </el-col>
          <el-col :xl="12" :xs="12" :sm="12">
            <div style="display: flex; height: 30px; line-height: 30px">
              <div class="leftText">服务端白名单IP</div>
              <div>
                {{
                  baseInfoData.serverSafeIp ? baseInfoData.serverSafeIp : "--"
                }}
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </Edialog>
  </div>
</template>

<script>
import Edialog from "@/components/Edialog";
import { getIfSystemById } from "@/api/management/dockingSys";
export default {
  name: "detailEdit",
  components: {
    Edialog,
  },
  props: {
    internalDialog: {
      type: Boolean,
      required: false,
    },
  },
  data() {
    return {
      detailId: "",
      detailShow: false,
      // 基本信息数据
      baseInfoData: {},
    };
  },
  methods: {
    async open(scope) {
      this.detailId = scope.id;
      await this.getBaseInfo();
      this.detailShow = true;
    },
    // 获取基本信息
    async getBaseInfo() {
      let res = await getIfSystemById(this.detailId);
      if (res.data && res.data.bdata) {
        this.baseInfoData = res.data.bdata;
      }
    },
    // 关闭弹框方法
    detailClose() {
      this.baseInfoData = {};
      this.detailShow = false;
    },
  },
};
</script>

<style scoped lang="scss">
.zdyRow {
  border-bottom: 1px dashed #ccc;
  padding-bottom: 10px;
  margin-bottom: 20px;
}
.line {
  width: 4px;
  height: 16px;
  background-color: #337dff;
  margin-right: 6px;
}
.leftText {
  width: 140px;
  text-align: right;
  margin-right: 20px;
  color: #999;
}
</style>
